<script setup>
import { ref, computed } from 'vue'
import { Icon } from '@iconify/vue'
import {
  PATTERN_BACKGROUND_DIRECTION,
  PATTERN_BACKGROUND_MASK,
  PATTERN_BACKGROUND_SPEED,
  PATTERN_BACKGROUND_VARIANT,
} from '../components/ui/pattern-background'
import PhotoGallery from '../components/ui/photo-gallery/PhotoGallery.vue'
import PatternBackground from '../components/ui/pattern-background/PatternBackground.vue'
import BlackHoleBackground from '../components/ui/BlackHoleBackground/BlackHoleBackground.vue'

import GradientButton from '../components/ui/gradient-button/GradientButton.vue'
import { useColorMode } from '@vueuse/core'
const items = [
  {
    src: 'https://images.pexels.com/photos/16834200/pexels-photo-16834200/free-photo-of-young-brunette-in-a-white-dress-sitting-on-a-bench-and-holding-flowers.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
  },
  {
    src: 'https://images.pexels.com/photos/16834202/pexels-photo-16834202/free-photo-of-young-woman-in-a-white-dress-posing-outdoors.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
  },
  {
    src: 'https://images.pexels.com/photos/16834194/pexels-photo-16834194/free-photo-of-woman-in-white-dress-posing-with-red-flowers-on-lap.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
  },
  {
    src: 'https://images.pexels.com/photos/17362900/pexels-photo-17362900/free-photo-of-pretty-young-model-in-chinese-retro-dress.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
  },
  {
    src: 'https://images.pexels.com/photos/19447919/pexels-photo-19447919/free-photo-of-model-in-a-pink-ao-dai-dress-with-a-bouquet-of-tulips-by-the-river.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
  },
  {
    src: 'https://images.pexels.com/photos/20332975/pexels-photo-20332975/free-photo-of-young-woman-posing-in-a-silk-slip-dress.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
  },
  {
    src: 'https://images.pexels.com/photos/19732643/pexels-photo-19732643/free-photo-of-woman-in-white-dress-sitting-and-reading-book.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
  },
  {
    src: 'https://images.pexels.com/photos/17347482/pexels-photo-17347482/free-photo-of-woman-in-dress-posing-with-bag.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
  },
]

const isDark = computed(() => useColorMode().value == 'dark')
const bgColor = computed(() => (isDark.value ? '#000' : '#fff'))
</script>
<style></style>

<template>
  <BlackHoleBackground class="absolute inset-0 flex items-center justify-center rounded-xl">
    <!-- <PatternBackground :animate="true"
                     :direction="PATTERN_BACKGROUND_DIRECTION.Bottom"
                     :variant="PATTERN_BACKGROUND_VARIANT.BigDot"
                     class="flex h-[100%] w-full items-center justify-center"
                     :speed="PATTERN_BACKGROUND_SPEED.Slow"
                     :mask="PATTERN_BACKGROUND_MASK.EllipseTop"> -->
    <!-- <p class="relative z-20 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text py-8 text-4xl font-bold text-transparent sm:text-5xl">
      <PhotoGallery :items="items" />
    </p> -->

    <!-- <div class="text-blance flex justify-center p-10">
      <h1 class="text-balance text-center text-4xl font-bold">
        You are a
        <TextHighlight class="bg-gradient-to-r from-indigo-300 to-purple-300">
          f****ing great developer !
        </TextHighlight>
      </h1>
    </div> -->
  </BlackHoleBackground>

</template>
